<template>
  <div style="position:relative;height:520px;">
    <h1 style="height:40px;border-bottom: 1px dashed #c1c1c1;">{{ article.msg }}</h1>
    <ul style="height:480px;margin:0px;overflow-x:hidden;overflow-y:auto;">

      <li :key="index" v-for="(l,index) in article.links">

          <el-row type="flex">
            <el-col :span="22" class="coltop" style="overflow:hidden;padding-left:10px;">
              <a href="javascript:;" @click="open(l.articleurl)">{{l.articlename}}</a>
            </el-col>
            <el-col :span="2" class="coltop">
              <i @click="deletearticle(l.id)" class="el-icon-delete delete"></i>
            </el-col>
          </el-row>
           
      </li>

    </ul>


    <el-row type="flex" style="position:absolute;bottom:0px;background-color:rgba(255, 255, 255, 0);width: 100%;" >
      <el-col :span="6" style="height: 32px;line-height: 32px;padding-left: 10px;">
        <a href="javascript:;" class="abutton" @click="$router.push({path: '/homeindex'})">
          <i class="iconfont icon-fanhui aicon"></i>
        </a>
        <a href="javascript:;" class="abutton" @click="showaddarticle">
        <i class="iconfont icon-xinzeng aicon"></i>
        </a>
      </el-col>
      <el-col :span="18">
        <el-pagination
          small
          @size-change="changesize"
          @current-change="changecurrent"
          :current-page="currentpage"
          :page-sizes="[10, 15, 20, 50, 100]"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="article.totalcount" style="float:right;">
        </el-pagination>
      </el-col>
    </el-row>


    
    

    <el-dialog
      title="警告"
      :visible.sync="dialogVisible"
      :modal="false"
      size="large">
      <span>此操作将永久删除该文章, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deletesure">确 定</el-button>
      </span>
    </el-dialog>

    <addarticle></addarticle>
  </div>
</template>

<script>
import addarticle from '@/components/addarticle'
export default {
  name: 'topic',
  data () {
    return {
      pagesize: 10,
      currentpage: 1,
      dialogVisible: false,
      deleteid: 0
    }
  },
  methods: {
    changecurrent: function (val) {
      this.currentpage = val
      this.getmsg()
    },
    changesize: function (val) {
      this.pagesize = val
      this.getmsg()
    },
    getmsg: function () {
      var that = this
      var id = this.$route.params.id
      that.$store.dispatch('getarticlelist', {
        id: id,
        currentpage: that.currentpage,
        pagesize: that.pagesize
      })
    },
    deletesure: function () {
      var that = this
      that.H.ajax('/user/user/deletearticle', {id: that.deleteid}, 'post', function (data) {
        if (data.success === 1) {
          that.dialogVisible = false
          that.H.success(data.info)
          that.getmsg()
        } else {
          that.H.error(data.info)
        }
      })
    },
    deletearticle: function (id) {
      this.dialogVisible = true
      this.deleteid = id
    },
    open: function (url) {
      this.$electron.shell.openExternal(url)
    },
    showaddarticle: function () {
      this.H.store('addarticle', true)
    }
  },
  computed: {
    article: function () {
      return this.$store.state.article
    }
  },
  mounted: function () {
    this.getmsg()
  },
  components: { addarticle }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
h1, h2 {
  font-weight: normal;
  margin: 0px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px dashed #c1c1c1;
  text-align:left;
  padding: 0px 10px;
}
a {
  color: #000;
  font-size: 12px;
}
input{
  padding:10px;
  border:1px solid #000;
  border-radius:3px;
}
.btn{
  padding:10px;
  background-color:#42b983;
  color:#fff;
  border-radius:3px;
  border-color:#42b983;
}
.cards{
  margin:5px;
  border:none;
  box-shadow:none;
  background:none;
}
.delete{
  margin:0px 5px;
  color:rgb(191, 191, 191);
  cursor:pointer;
  opacity:0.2;
}
.delete:hover{
  opacity:1;
}
.abutton{
  float:left;
  margin-right:15px;
}
</style>
